/* eslint-disable */
import React, {useState} from 'react';
import {Button, Modal, Table, Input, Icon, Tooltip} from 'antd';
import {FileSearchOutlined, PlusOutlined} from "@ant-design/icons";
import FindProjectTable from "@/pages/New/components/projectOverview/findProjectTable";
import {DETAILSHOW, DETAILCLOSE} from '../../redux/projectDetailConstant'

/**
 * 该文件专门为组件生成action对象
 * 包含两个属性，其中type是标识属性，data是数据属性(即我们要传递的数据对象)
 */
export function showProjectDetailAction(data: any) {
  return {type: 'DETAILSHOW', data}
}

export function closeProjectDetailAction(data: any) {
  return {type: 'DETAILCLOSE', data}
}

const FindProject = (props: any) => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [projectsDetail, setProjectsDetail] = useState([]);
  const {showProjectDetail, closeProjectDetail} = props;

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
    console.log('handleOk:', projectsDetail);
    showProjectDetail(projectsDetail);
    // return (() => {
    //   setSelectedRowKeys([]);
    // })
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  // 定义一个selectedRow函数(需与return同级)，并接收参数
  const selectedRow = (projectDetail: any, key: any, flag: any) => {
    // console.log(projectDetail, key);
    if (!flag) {
      let index = 0;
      // 遍历projectsDetail数组中所有已记录项目详情
      for (let i = 0; i < projectsDetail.length; i++) {
        // 如果所选项目详情数组中有个元素的key等于当前key，则删除它
        if (projectsDetail[i].key === key) {
          index = i;
          break;
        }
      }
      projectsDetail.splice(index, 1)
    } else {
      projectsDetail.unshift(projectDetail)
    }
    // flag ? projectsDetail.push(projectDetail) : projectsDetail.splice(key, 1);
  }

  return (
    <>
      {/* 如果你希望它看起来像一个链接，可以使用a标签 */}
      <Tooltip placement="bottom" title="查找你的项目" color={"cyan"}>
        <a href="#" onClick={(e) => {
          e.preventDefault();
          showModal();
        }} style={{color: '#9fb3c8'}}>
          <FileSearchOutlined style={{fontSize: '80px'}}/>
        </a>
      </Tooltip>

      {/* 或者直接使用Button组件 */}
      {/*<Button type="text" onClick={showModal}>*/}
      {/*  <FileSearchOutlined style={{ fontSize: '80px'}} />*/}
      {/*</Button>*/}

      <Modal
        title="查找项目"
        visible={isModalVisible}
        width={900}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <FindProjectTable
          // 把func函数传递给FindProjectTable中的update参数
          selectedRowInvoke={selectedRow}
        />
      </Modal>
    </>
  );
};

export default FindProject;
